<template>
  <div>
    <ylheader :leftsvg="true" :title="'活动推荐'"></ylheader>
      <div class="loadmore-container" ref="activityrecoomedationWrapper">
       <div class="loadmore-ul">
        <div class="shuoshuo-new" v-if="listnodata">
          <span class="yl-2kong nosvg">
            <span class="path1">
              <span class="path2">
                <span class="path3">
                  <span class="path4">
                    <span class="path5">
                      <span class="path6">
                        <span class="path7">
                          <span class="path8">
                            <span class="path9"></span>
                          </span>
                        </span>
                      </span>
                    </span>
                  </span>
                </span>
              </span>
            </span>
          </span>
          <span class="no-text">还没有相关内容哦，快去跟大家互动吧！</span>
        </div>
        <ul>
          <li v-for="(items,index) in list"  :key="index">
            <activityrecommendationlist @click.native="torepcomdet(items)" :topicimg="items.pushCoverMap" :abbreviations="items.pushOutline" :followNumber="items.followNumber" :title="items.pushTitle" :topictype="items.isShow" :time="items.pushTime" :isshowtime="items.isshowtime">
            </activityrecommendationlist>
          </li>
        </ul>
        <p style="padding-bottom:10px;"></p>
       </div>
      </div>
  </div>
</template>
<script>
import ylheader from "src/components/yl-header.vue";
import activityrecommendationlist from "src/components/activityrecommendation/activityrecommendationlist.vue";
import Vue from 'vue'
import api from "src/api/index";
import { mapState, mapMutations } from "vuex";
export default {
  name:"activityrecommendation",
  data() {
    return {
    list: [],
    page: 1,
    totalPage: 0,
    timestap:"",
    listnodata:false,
    is_r: false,
    };
  },
  components: {
    ylheader,
    activityrecommendationlist
  },
  computed: {
    ...mapState(["notreadmsg"])
  },
  mounted() {
    this.updatanotreadnum();
    this.getList().then(data => {
        return this.initScroll();
      }).then(data => {
          this.$nextTick(() => {
           if (!!this.myscroll) this.myscroll.refresh();
          });
          let loadmore = document.getElementsByClassName("loadmore-ul");
          if ("rotate2detail" == localStorage.turnCount) {
            if (loadmore.length > 0) {
              setTimeout(() => {
                loadmore[0].style.transform = localStorage.turnBackplace;
              }, 0);
            }
            localStorage.turnCount = "";
          } 
    });
  },
  methods: {
    ...mapMutations(["changenotreadmsg"]),
     getList() {
      let p = new Promise((resolve, reject) => {
         if ("rotate2detail" == localStorage.turnCount) {
          let rotateObj = JSON.parse( localStorage.rotateDetailStorage);
          this.list = rotateObj.list;
          this.page = rotateObj.page;
          this.totalPage = rotateObj.totalPage;
          if(this.page<this.totalPage){
            this.is_r=false;
          }
          resolve(true);
        }else{
          const data = {
            page: this.page,
            limit: 10,
          }
           api.getpushlist(data).then(res=>{
             this.list = this.is_r
                 ? [...this.list, ...res.data.list]
                 : res.data.list;
             this.totalPage = res.data.totalPage
             if(this.page<res.data.totalPage){
                this.is_r=false;
             }
             this.getreddotdisplay(this.list);
             if(this.list.length==0){
               this.listnodata = true;
             } else{
               this.listnodata=false;
             } 
            if(this.myscroll){
              this.$nextTick(() => {
                this.myscroll.refresh();
              });
            }
           
             let rotateDetailObj = JSON.stringify({
               list:this.list,
               page: this.page,
               totalPage: this.totalPage,
             });
             localStorage.rotateDetailStorage = rotateDetailObj;
             resolve("获取推送内容....");
           })
        }
         
      });
      return p;
    },
     //初始化scroll
    initScroll() {
      let p = new Promise((resolve, reject) => {
        let activityrecoomedationWrapper = this.$refs.activityrecoomedationWrapper;
        localStorage.tempPageHeight = document.getElementsByClassName(
          "loadmore-ul"
        )[0].scrollHeight;
        let _this = this;
        this.$nextTick(() => {
          _this.myscroll = new iScroll(activityrecoomedationWrapper, {
            preventDefault: false,
            onScrollMove: function() {
              if ((this.y <= this.wrapperH - this.scroller.clientHeight-50)&& _this.is_r == false) {
                _this.is_r = true;
                if(_this.page<_this.totalPage){
                  _this.page++;
                  _this.getList();  
                }
              }
            },
            onScrollEnd: function() { },
            onScrollStart: function() {
              if (
                localStorage.tempPageHeight !=
                document.getElementsByClassName("loadmore-ul")[0].scrollHeight
              ) {
                this.refresh();
                localStorage.tempPageHeight = document.getElementsByClassName(
                  "loadmore-ul"
                )[0].scrollHeight;
              }
            }
          });
          resolve("初始化scroll");
        });
      });
      return p;
    },
    torepcomdet(items) {
      localStorage.turnCount = "rotate2detail";
      let loadmore = document.getElementsByClassName("loadmore-ul");
      if (loadmore.length > 0) {
        localStorage.turnBackplace = loadmore[0].style.transform;
      }
      this.totopicdetail(items);
    },
    //判断是否显示日期红点
    getreddotdisplay(data){
      let that=this;
      this.timestap="";
      _each(data,(v,i)=>{
        if(i==0){
          that.timestap= v.pushTime;
          v.isshowtime = true
          Vue.set(that.list,i,that.list[i]);
        }else if(v.pushTime==that.timestap){
          v.isshowtime= false;
          Vue.set(that.list,i,that.list[i]);
        }else{
          v.isshowtime=true;
          Vue.set(that.list,i,that.list[i]);
          that.timestap= v.pushTime
        }
      })
    },
    totopicdetail(items){
      const rotateclick = {
        id: items.id,
        type: 14
      };
      this.$util.saveclicknum(rotateclick);
      if(items.isHaveContent=="1"){//有推送内容
        this.$router.push({
          path: "/activityrecommendationdetail",
          query: { pushId: items.id}
        });
      }else if(items.isHaveContent=="0"){
          switch (items.type){
            case 1:
              this.$router.push({
                path: "/topicdetail",
                query: { topicId: items.jumpId}
              });
            break;
            case 2:
              this.$router.push({
                path: "/shuodetail",
                query: { saysId: items.jumpId,shuoshuoIndex:0}
              });
            break;
            case 3:
              this.$router.push({
                path: "/replacedetail",
                query: { replacedId: items.jumpId,replacedResult:0,replaceIndex:0}
              });
            break;
            default:
            break;
          }
      }
    },
    updatanotreadnum(){//更新消息未读数
        const numobj = { notReadLike:this.notreadmsg.notReadLike, notReadComment: this.notreadmsg.notReadComment,
                              notreadleavemsg:this.notreadmsg.notreadleavemsg,notreadrec:0,notReadSysMsg:this.notreadmsg.notReadSysMsg};
        this.changenotreadmsg(numobj); 
    }
  }
};
</script>
<style scoped>

</style>